<template>
    <div class="MUser-list">
        <div class="MUser-name" v-for="(user,index) in curVal" :key="index">
            <my-icon class="user-icon" size="0.7rem" type="icon-people"></my-icon>
            <span class="MUser-fullName">{{ user.name }}</span>
            <my-icon class="user-del" v-if="!readonly" @click="onDelete(index)" size="0.9rem"
                     type="icon-icon-test26"></my-icon>
        </div>
        <div class="MUser-chang" v-if="!readonly">
            <my-icon @click="onChange" size="1rem" type="icon-Vue3_user-add"></my-icon>
        </div>
    </div>
</template>

<script>
import Util from "../js/Util";
import Dialog from "@/js/Dialog";

export default {
    name: "RxVueUserDialog",
    emits: ['update:modelValue'],
    props: {
        tenantId: {
            //租户ID
            type: String,
        },
        dimIds: {
            //指定维度ID,默认为1
            type: String,
            default() {
                return '1';
            }
        },
        single: {
            //单选多选
            type: Boolean,
            default() {
                return false;
            }
        },
        organization: {
            type: Boolean,
            default() {
                return true;
            }
        },
        readonly: {
            type: Boolean,
            default() {
                return false;
            }
        },
        modelValue: {
            type: [String, Array],
            default: ''
        },
        filter: {
            type: Object
        },
    },
    data() {
        return {
            curVal: [],
            userList: [],//选中用户列表全部数据
            canEdit: true,//是否可编辑
            randomId: Util.randomId(),
            //过滤参数
            params: {},
        }
    },
    created() {
        this.stateCanEdit()
        this.initFilter()
    },
    methods: {
        /**
         * 初始化过滤参数
         */
        initFilter() {
            if (this.filter) {
                if (this.filter.orgConfig == 'selOrg') {
                    var groupId = JSON.parse(this.filter.group).value;
                    this.params.groupId = groupId;
                } else if (this.filter.orgConfig == 'curOrg') {
                    this.params.groupId = "curOrg";
                } else if (this.filter.orgConfig == 'selDim') {
                    this.params.dimId = this.filter.dimId;
                    this.params.initRankLevel = this.filter.initRankLevel;
                }
            }
        },
        //判断控件是否可以编辑
        stateCanEdit() {
            if (this.action == 'detail') {
                this.canEdit = false
            } else if (this.action == 'edit') {
                this.canEdit = true
            }
        },
        onDelete(index) {
            this.curVal.splice(index, 1);
            this.$emit('update:modelValue', this.curVal);
            this.$emit('change', this.curVal);
        },
        onChange() {
            let list = [];
            this.curVal.forEach(res => {
                list.push({
                    userId: res.id,
                    fullName: res.name,
                })
            })
            let conf = {
                data: {
                    value: list,
                    'single': this.single,
                    'groupId': this.params.groupId,
                    'initRankLevel': this.params.initRankLevel,
                    'dimIds': this.params.dimId || this.dimIds,
                    'tenantId': this.tenantId,
                    'organization': this.organization,
                    'randomId': this.randomId
                },
                curVm: this
            };
            Dialog.openUserDialog(conf, (data) => {
                this.userOK(data)
            })
        },
        userOK(curValue) {
            this.userList = curValue;
            let newValue = [];
            if (this.single) {
                //单选
                let obj = curValue[0]
                newValue.push({
                    id: obj.userId,
                    name: obj.fullName,
                })
            } else {
                //多选
                if (curValue) {
                    curValue.forEach(res => {
                        newValue.push({
                            id: res.userId,
                            name: res.fullName,
                        })
                    })
                }
            }
            this.curVal = newValue;
            this.$emit('update:modelValue', this.curVal);
            this.$emit('change', this.curVal);
        }
    },
    watch: {
        modelValue: {
            handler(v) {
                this.curVal = v?v:[];
            },
            deep: true,
            immediate: true
        },
    }
}
</script>

<style scoped>
.MUser-list {
    display: flex;
    grid-gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.MUser-name {
    font-size: .7rem;
    border-radius: 8px;
    background: rgba(242, 242, 242, 1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 8px 8px 8px;
    display: flex;
    align-items: center;
    position: relative;
}

.MUser-fullName {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 19.6px;
    color: rgba(0, 0, 0, 0.65);
}

.user-icon {
    width: 22px;
    height: 22px;
    background: rgba(66, 133, 244, 1);
    display: flex;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 18px;
    text-align: center;
    margin-right: 0.2rem;
}

.user-del {
    position: absolute;
    right: -0.3rem;
    top: -0.3rem;
    color: rgba(255, 81, 81, 1);
}

.MUser-chang {
    width: 40px;
    height: 40px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(245, 246, 249, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.5);

}
</style>
